<template>
    <view>
        <view class="concern" v-if="show">
            <template v-if="list.length">
            <view  class="list" v-for="(item,key) in list" :key="key">

                <navigator class="list_left" :url="'/pages/my/friend_dynamics/index?id='+item.id">
                    <image :src="item.avatar" class="img"></image>
                    <view class="content">
                        <view class="title font-regular">{{item.name}}</view>
                        <view class="des font-light" v-if="item.tape_record.title">
                            近期作品:《{{substr(item.tape_record ,8)}}》
                        </view>
                        <view class="des font-light" v-else>
                            近期作品:无
                        </view>
                    </view>
                </navigator>
                <view class="list_right" v-if="item.i_follow && item.follow_me">
                    <text class="iconfont begin_b">&#xe616;</text>
                    <view class="guan_zhu font-regular" @tap="unFollow(item.id)" >互相关注</view>
                </view>
                <view class="list_right" v-if="item.i_follow && !item.follow_me">
                    <text class="iconfont begin_b">&#xe61b;</text>
                    <view class="guan_zhu font-regular" @tap="unFollow(item.id)" >已关注</view>
                </view>
                <view class="list_right guanzhu" v-if="!item.i_follow">
                    <text class="iconfont begin_l">&#xe615;</text>
                    <view class="guan_zhu font-regular" @tap="follow(item.id)">关注</view>
                </view>
            </view>
            </template>

            </view v-else>
                <view class="font-regular"
                      style="color:#664E37;font-size: 26upx;text-align: center;margin-top:580upx;opacity: .5">
                    暂时没有新的关注<br />快去关注你喜欢的朗读人吧~
                </view>
                <button class='pop_btn' @tap="redirect('/pages/index/index')" style="margin-top: 20upx" plain="true">
                    去关注
                </button>
            </view>


    </view>
    </view>
</template>

<script>
  import Request from '@/utils/request.js'
  import tool from '@/utils/tool.js'
  export default {
    name: "index",
    data() {
      return {
        list: [],
        page:0,
        show:false,
      }
    },
    created: function () {
      this.getList();
    },
    methods:{
      substr(str,length){
        if(!str)
          return '';
        str = str.title;
        if(str.length>length) {
          return str.substring(0, length-1)+'..';
        }else{
          return str;
        }
      },
      follow(id) {
        Request.post('/user/follow', {target_user_id: id}).then((res) => {
          this.getList();
          // for (let key in this.list) {
          //   if (this.list[key].id == 1) {
          //     this.list[key].user.i_follow = 0;
          //   }
          // }

        })
      },
      redirect(url){
        uni.navigateTo({
          url:url
        })
      },
      unFollow(id) {
        Request.delete('/user/follow/cancel/' + id).then((res) => {
          this.getList();
          // for (let key in this.list) {
          //   if (this.list[key].id == 1) {
          //     this.list[key].user.i_follow = 0;
          //   }
          // }
        })
      },
      getList(){
        // this.page++;
        Request.get('/common/user?type=i_follow&pageSize=100&page='+this.page).then((res)=>{
          this.list = res.data;
          this.show=true;
        })
      }
    }
  }
</script>

<style lang='scss'>

    .pop_btn{
        background: #FCB300 !important;
        border: none !important;
        width: 180upx;
        height: 60upx;
        color:white !important;
        font-weight: $font-medium;
        font-size: 26upx;
        line-height: 60upx;
        border-radius: 80upx;
        margin: auto;
    }
    .concern{
        padding: 0upx 55upx;
        .list{
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 2upx solid #f2f2f2;
            padding: 39upx 0;
            .list_left{
                display: flex;
                align-items: center;
                .img{
                    width: 100upx;
                    height: 100upx;
                    border-radius: 50%;
                }
                .content{
                    padding-left: 20upx;
                    .title{
                        font-size: $uni-font-size-base;
                        color: $uni-color-664e37;
                    }
                    .des{
                        padding-top: 8upx;
                        font-size: $uni-font-size-14;
                        color: $uni-color-876a48;
                    }
                }
            }
            .list_right{
                width: 170upx;
                height: 60upx;
                border-radius: 30upx;
                border: 2upx solid $uni-color-876a48;
                display: flex;
                justify-content: center;
                align-items: center;
                .begin_1{
                    font-size: 16upx;
                    color: $uni-color-876a48;
                }
                .begin_b{
                    font-size: 20upx;
                    color: $uni-color-876a48;
                }
                .guan_zhu{
                    font-size: $uni-font-size-14;
                    color: $uni-color-876a48;
                    padding-left: 5upx;
                }
            }
        }
    }

</style>
